<template>
  <p>{{ state.name }} --- {{ state.age }} --- {{ ageRef }}</p>
</template>

<script>
import { ref, onMounted, reactive, toRef } from "vue";

export default {
  setup() {
    // const state = reactive({
    //   name: "wc",
    //   age: 20,
    // });

    // toRef如果用于普通的对象，产出的结果是不具备响应式
    const state = {
      name: "wc",
      age: 20,
    };
    let ageRef = toRef(state, "age");

    setTimeout(() => {
      ageRef.value = 30; // .value 修改值
    }, 3000);

    return {
      state,
      ageRef,
    };
  },
};
</script>